<template>
	<view class="apply page bgf5 c33">

		<scroll-view scroll-y :scroll-into-view="scrollToView" class="list px15 boxS bgf5" @scroll="onScroll"
			style="height: calc(100vh - 272rpx)">
			<view id="tab1" class="bgff r10 p15 fs13 shadow my15">
				<view class="flex flexC flexB  pb16 pt9">
					<text class="fs15">订单号</text>
					<input v-model="order_no" disabled="disable" placeholder="" />
				</view>
			</view>
			
			<view v-if="dou_code != ''" id="tab1" class="bgff r10 p15 fs13 shadow my15">
				<view class="flex flexC flexB   pb16 pt9">
					<text class="fs15">抖音券</text>
					<input v-model="dou_code" disabled="disable" placeholder="" />
				</view>
			</view>
			
			<view v-if="mt_code != ''" id="tab1" class="bgff r10 p15 fs13 shadow my15">
				<view class="flex flexC flexB  pb16 pt9">
					<text class="fs15">美团券</text>
					<input v-model="mt_code" disabled="disable" placeholder="" />
				</view>
			</view>
			
			<view id="tab3" class="bgff r10 p15 fs13 shadow mb15">
				<view class="fs16">好评截图</view>
				<view class="fs11 c99 mt8">注：图片是抖音或者美团的好评截图</view>
				<view class="mt18 flex flexC flexW">
				
					<view v-if="image != ''"  class="bor boxS mr14 mb12 r8 addImg flex flexC flexJC">
						<image class="cover r8" :src="image" mode="aspectFill"></image>
						<view class="del" @click="delLogo">
							<uni-icons type="clear" color="#999" size="28"></uni-icons>
						</view>
					</view>
					
					<view class="bor boxS mr14 mb12 r8 addImg flex flexC flexJC" @click="uploadLogo">
						<uni-icons type="plusempty" color="#332C2A" size="16"></uni-icons>
					</view>
				</view>
			</view>
			
			
			
		</scroll-view>	
		
		<button @click="add" class="btn m12 flex1 r40 fs16 c33 py4" hover-class="none">提交</button>
		

	</view>
</template>

<script>
	import {
		ossUpload
	} from '@/js_sdk/jason-alioss-upload/oss.js'
	export default {
		data() {
			return {
				order_id:'',
				order_no:'',
				dou_code:'',
				mt_code:'',
				image:'',
				type:''
			};
		},
		onLoad(option) {
			this.order_id = option.id;
			this.order_no = option.order_no;
			this.dou_code = option.dou_code;
			this.mt_code = option.mt_code;
			this.type = option.type;
			
		},
		onShow() {
		
		},
		methods: {

			add() {

				if (this.image == '') {
					uni.showToast({
						title: '请上传好评照片',
						icon: 'none'
					})
					return;
				}
		
				let that = this;
				let param = {

					order_id:this.order_id,
					image:this.image,
					dou_code:this.dou_code,
					mt_code:this.mt_code,
					type:this.type
				};

				this.$api.comment(param).then(res => {

					if (res.code == 1) {

						uni.showModal({
							title: "提示",
							content: "提交成功，请耐心等待",
							showCancel: false,
							confirmText: "知道了",
							complete(res) {

								uni.navigateBack({
									delta: 1
								})

							}
						})
					} else {
						uni.showToast({
							msg: res.msg,
							icon: 'none'
						})
					}
				})




			},

			delLogo() {
				this.image = "";
			},

		

			uploadLogo() {

				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					fail(res) {
						console.info(res);
					},
					success: async (file) => {
						const {
							success,
							data
						} = await ossUpload(file.tempFilePaths[0], file.tempFiles[0].path, 'img/')
						if (success) {
							console.info(data);
							that.image = data;

						} else {
							uni.showToast({
								icon: 'none',
								title: data
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.apply {
		.time {
			color: #F95C28;
		}

		.btn {
			background-color: #FAD00D;
		}

		.btnbox {
			.icon {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.nav {
			color: #1989FA;
		}

		#tab4 {
			.tags {
				>text {
					border: 2rpx solid #f5f5f5;
				}

				.active {
					border: 2rpx solid #F95C28;
					color: #F95C28;
					background-color: #fff;
					box-sizing: border-box;
				}
			}
		}

		#tab3 {
			.addImg {
				width: 182rpx;
				height: 182rpx;
				position: relative;

				.cover {
					width: 100%;
					height: 100%;
				}

				.del {
					position: absolute;
					top: -26rpx;
					right: -26rpx;
				}
			}
		}

		#tab1 {
			.swichbox {
				overflow: hidden;

				>text {
					&.active {
						background-color: #FAD00D;
					}
				}
			}
		}

		.tabbox {
			.item {
				position: relative;

				.active {
					color: #333;
					font-weight: 600;
				}

				.icon {
					width: 38rpx;
					height: 10rpx;
					position: absolute;
					bottom: 0;
					left: calc(50% - 19rpx);
				}
			}
		}
	}
</style>